<template lang="html">
  <div class="search">
    <div class="box">
    	<input  placeholder="请输入内容" prefix-icon="el-icon-search" />
    	<img class="sousuo" src="../images/sousuo.png" />
    	<router-link tag="span" to="/index/home/Details">取消</router-link>
    </div>
    <div class="search-list">
    	<ul>
    		<li>诗词</li>
    		<li>济南的冬天</li>
    		<li>陋室铭</li>
    		<li>记承天寺夜游</li>
    		<li>文言文</li>
    	</ul>
    </div>
  </div>
</template>

<script>
export default {
  name:"search",
  data(){
    return{

    }
  }
}
</script>

<style scoped lang="less">
.search{
	background: #D2D2D2;
}
.box{
	background-color: #3DAE95;
	height: 50/50rem;
	width: 100%;
	padding: 10/50rem 10/50rem;
	box-sizing: border-box;
	line-height: 10/50rem;
	position: relative;
}
.box input{
	  width: 75%;
	  height: 30/50rem;
	  line-height: 30/50rem;
	  background: #fff;
	  border: 1px solid #f1f2f3;
	  padding-left: 30/50rem;
	  float: left;
	  display: inline-block;
	  margin-right: 20/50rem;	
	  font-size: 16/50rem;
	  border-radius: 10/50rem;

}
.box .sousuo{
	width: 16/50rem;
	position: absolute;
	top: 18/50rem;
	left: 20/50rem;
}
.box img{
	margin-bottom: 20/50rem;
	width: 30/50rem;
}
.box span{
	font-size: 16/50rem;
	color: #fff;
}
.search-list ul{
	overflow: hidden;
}
.search-list ul li{
	float: left;
	padding: 5/50rem 8/50rem;
	background-color: #EEEEEE;
	font-size: 14/50rem;
	margin:10/50rem;
	border-radius: 5/50rem;
}


</style>
